<template>
    <!-- 需要什么数据 -->
    <div class="card_table" :key="tableProps.name">
        <div class="content-table">
            <el-table ref="multipleTableRef" style="width: 100%" :data="tableData" v-loading="loading" border
                :scrollbar-always-on="true" :row-class-name="tableRowClassName" @cell-dblclick="cellDbClick"
                :cell-class-name="cellClassName" highlight-current-row :cell-style="{ padding: '4px 0px' }"
                :header-cell-style="{ fontSize: '14px', backgroundColor: '#F2F6FF', color: '#000000' }">
                <template v-for="item in tableHeader" :key="item.prop">
                    <template v-if="item.type === 'normal'">
                        <!--  :width="flexColumnWidth(item.prop, tableData,tableHeader)"-->
                        <el-table-column v-bind="item" align="center" 
                            show-overflow-tooltip> </el-table-column>
                    </template>
                    <template v-else-if="item.type === 'copy'">
                        <el-table-column v-bind="item" align="center" show-overflow-tooltip>
                            <template #default="scope">

                                <span style="cursor: pointer;display: inline-block;width: 100%;"
                                    @click="handleCopy(scope.row[item.prop], $event)">
                                    {{ scope.row[item.prop] }}
                                </span>

                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.type === 'image'">
                        <el-table-column v-bind="item" align="center">
                            <template #default="{ row }">
                                <el-image v-if="row.productAttachmentList" style="width: 35px; height: 35px"
                                    :src="row.productAttachmentList[0].attachmentUri"
                                    :previewSrcList="[row.productAttachmentList[0].attachmentUri]" fit="cover"
                                    :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-teleported="true">
                                </el-image>
                                <span v-else></span>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.type === 'custom'">
                        <el-table-column v-bind="item" align="center" show-overflow-tooltip>
                            <template #default="scope">
                                <slot :name="item.slotName" v-bind="scope" :props="item.prop" :slotCode="'这是自定义内容'">
                                </slot>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else-if="item.type === 'handle'">
                        <el-table-column v-bind="item" align="center">
                            <template #default="scope">
                                <slot :name="item.slotName" v-bind="scope" :props="item.prop" :slotCode="'这是自定义内容'">
                                </slot>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-else>
                        <el-table-column v-bind="item" show-overflow-tooltip align="center" />
                    </template>
                </template>
            </el-table>
        </div>
        <div class="pagination-footer">
            <el-pagination size="small" v-model:current-page="pageNum" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import clip from '@/utils/clipboard'

import useInstance from "@/hooks/useInstance";
import useColumnWidth from '@/utils/columnWidth'

const {flexColumnWidth} = useColumnWidth()

const { global } = useInstance();
const multipleTableRef = ref()

nextTick(() => {
    if (multipleTableRef.value) {
        global.$dragTable(multipleTableRef);
    }
})





let pageNum = ref(1) // 当前页码
let pageSize = ref(20) // 每页数据
const props = defineProps({
    tableHeight: {
        type: Number,
        default: 400
    },
    tableData: {
        type: Array as any,
        default: () => []
    },
    pageTotal: {
        type: [Number, String],
        default: 0
    },
    loading: {
        type: Boolean,
        default: false
    },

    tableProps: {
        type: Object,
        default: () => ({
            name: String,
            propsList: {
                type: Array,
                default: () => []
            },
            tableSize: String
        })
    }
})
const cellDbClick = (row: any, column: any, cell: HTMLTableCellElement, event: any) => {
    clip(event.target.innerText, event)
}
const handleCopy = (text: any, event: any) => {

    clip(text, event)
}
const tableHeader = computed(() => {
    return props.tableProps.propsList.filter(item => item.hidden)
})
const emit = defineEmits([
    "get-page",
])
// 每页数据
const handleSizeChange = () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value
    }
    emit("get-page", params)
}
// 点击了页面数据
const handleCurrentChange = () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value
    }
    emit("get-page", params)
}
const initPagination = () => {
    pageNum.value = 1
    pageSize.value = 20
}
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 == 1) {
        return 'warning-row';
    } else if (rowIndex % 2 == 3) {
        return 'success-row';
    }
    return '';
}
const cellClassName = ({ row, column }) => {
    const { property, type } = column
    const arr = ['productLink', 'channelMerchantName', 'channelMerchantCode', 'channelName', 'channelCode', 'supplierName', 'supplierCode', 'data']
    if (type == 'copy' && arr.includes(property)) {
        return 'copyBg'
    }

}

defineExpose({
    initPagination
})
</script>


<style lang="scss" scope>
.el-pagination--small .el-select {
    width: 100px !important;
}

.pagination-footer {
    margin-top: 10px;
    padding: 0px;
    display: flex;
    justify-content: flex-end;
}

.el-table .warning-row {
    background: #F2F6FF;
}

.el-table .success-row {
    background: #FFFFFF;
}

.el-table .cell.el-tooltip {
    padding: 0px 5px;
}

.el-table .cell {
    padding: 0px 5px;
}

.copyBg {
    .cell {
        border-radius: 2px;
        color: #3498db;
        ;
    }
}

.copyBg:hover {
    .cell {
        border-radius: 2px;
    }
}

.current-row {
    td {
        background-color: #fefedf !important;
    }
}
</style>
